<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            border: #249bdb 1px solid;
            width: 500px;
            border-collapse: collapse;
        }

        table td {
            border: #249bdb 1px solid;
            padding: 10px;
        }

        table th {
            border: #249bdb 1px solid;
            padding: 10px;
            background-color: rgb(200, 200, 200);
        }
    </style>

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#recode").click(function () {
                var thing = $("input[name='thing']").val();
                var time = $("input[name='time']").val();
                var tr = "<tr>"
                    + "<th><input type='checkbox'></th>"
                    + "<th>" + thing + "</th>"
                    + "<th>" + time + "</th>"
                    + "</tr>";
                $("table tr").last().after(tr);
            })

            $("input[type='checkbox']").live("click", function () {
                var cont = "";
                $(this).parent().nextAll().each(function () {
                    cont += $(this).html() + "  ";
                })
                $(this).parent().parent().remove();
                var div = "<div>" + cont + "</div>";
                $("#complete").append(div);
            })
        })
    </script>
</head>
<body>
<h5>
    可以添加要做的事情和时间到备忘录中，
    勾选备忘录中的复习框，表示事情完成，从备忘录移动到已完成列表中。
</h5>
<div>
    事项：<input type="text" name="thing"/><br/>
    时间：<input type="text" name="time"/><br/>
    <input id="recode" type="button" value="添加"/>
</div>
<hr/>
<div>
    <h3>备忘录</h3>
    <table>
        <tr>
            <th></th>
            <th>事项</th>
            <th>日期</th>
        </tr>
    </table>
</div>
<hr/>
<h3>已完成</h3>
<div id="complete">

</div>
</body>
</html>